<template>
  <div class="learn-note-layout">
    <div class="doc-sider">
      <div
        v-for="item in articles"
        :key="item.url"
        :class="['doc-file-item', {active: item.url === currentArticle?.url}]"
        @click="selectArticle(item)"
      >
        <span class="doc-title">{{ item.title }}</span>
        <span class="jump-icon" @click.stop="openInNewTab(item.url)" title="新标签页打开">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14 3H21V10" stroke="#2080f0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M10 14L21 3" stroke="#2080f0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M21 21H3V3H12" stroke="#bdbdbd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </span>
      </div>
    </div>
    <div class="doc-content">
      <iframe 
        v-if="currentArticle" 
        :src="iframeUrl" 
        class="article-iframe"
        frameborder="0"
        sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
      ></iframe>
      <div v-else class="empty-content">请选择一篇文章</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { getArticles } from '../../../utils/index'

const articles = ref<{ title: string, url: string }[]>([])
const currentArticle = ref<{ title: string, url: string } | null>(null)

// 计算iframe的URL，通过代理访问
const iframeUrl = computed(() => {
  if (!currentArticle.value) return ''
  return currentArticle.value.url
})

onMounted(async () => {
  // 获取文章列表
  try {
    const result = await getArticles()
    const remoteArticles = result.success ? result.data : []
    // 固定文章
    const fixedArticles = [
      { title: 'SpringAI 快速开始', url: 'https://www.spring-doc.cn/spring-ai/1.0.0/getting-started.html' },
      { title: '聊天客户端API', url: 'https://www.spring-doc.cn/spring-ai/1.0.0/api_chatclient.html' }
    ]
    articles.value = [...fixedArticles, ...remoteArticles]
    if (articles.value.length > 0) {
      // 默认选择第一篇文章
      selectArticle(articles.value[0])
    }
  } catch (error) {
    console.error('获取文章列表失败:', error);
  }
})

function selectArticle(article: { title: string, url: string }) {
  if (article.url === currentArticle.value?.url) {
    return // 如果点击的是当前文章，不做任何操作
  }
  currentArticle.value = article
}

function openInNewTab(url: string) {
  window.open(url, '_blank')
}
</script>

<style scoped>
.learn-note-layout {
  display: flex;
  height: calc(100vh - 50px);
  background: #f7f7f7;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  overflow: hidden;
}

.doc-sider {
  width: 330px;
  background: #fff;
  border-right: 1px solid #e0e0e0;
  padding: 18px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
  height: 100%;
  overflow-y: auto;
}

.doc-file-item {
  padding: 10px 24px;
  cursor: pointer;
  font-size: 15px;
  color: #333;
  border-left: 3px solid transparent;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.doc-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jump-icon {
  margin-left: 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.18s;
}
.jump-icon:hover {
  opacity: 1;
}

.doc-file-item.active {
  background: #eaf4ff;
  color: #2080f0;
  border-left: 3px solid #2080f0;
  font-weight: bold;
}

.doc-file-item:hover {
  background: #f5f7fa;
}

.doc-content {
  flex: 1;
  background: #fff;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.article-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
}

.empty-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 18px;
  color: #999;
}
</style>